import { CreateUINode, UINode } from '../../gui/base/ui-node';
import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import { CreateUIButton } from '../../gui/control/ui-button';
import { ANCHOR } from '../../gui/control/abstract-base';
import { CreateUIImage, UIImage } from '../../gui/control/ui-image';
import { Engine } from '@babylonjs/core/Engines/engine';
import { IUIContainerToolOptions } from './ui-container-tool';
import { toCanvas } from 'qrcode';
import { CaptureScreen } from '../capture-screen';
import { Stage } from '../../base/stage';
import { ScreenshotImage } from '../../texture/icon-image/screenshot-image';
import { QrCodeImage } from '../../texture/icon-image/qr-code-image';
import { UIRootTool } from './ui-root-tool';
import { CreateUIGroup } from '../../gui/control/ui-group';


/**
 * 创建开发阶段ui组件（截屏、二维码）
 * @param name 名称
 * @param engine 引擎
 * @param stage 舞台
 * @param root 根容器
 * @param style 参数对象
 * @returns ui节点集合
 */
const CreateDevelopmentUiNodes = (name: string, engine: Engine, stage: Stage, root: UIRootTool, style: IUIContainerToolOptions): UINode[] => {
    const btnStyle = {
        width: style.lineHeight!*0.8,
        height: style.lineHeight!*0.8,
        cornerRadius: style.cornerRadius,
        alpha: style.alpha,
        renderingGroupId:style.frontRenderingId,
    };

    let qrImg: UIImage;

    const developmentNode = CreateUINode(name + '-development-ui', stage.uiScene,
        {
            lockToCamera: true,
            offset: new Vector3(style.spacing, -style.spacing!, 0),
            anchor: new Vector3(0, 0, 0),
            xrRatio:{x:1,y:1},
        },
        [
            CreateUIGroup(name + '-development-group', stage.uiScene,
                {
                    anchor: ANCHOR.LEFT_TOP,
                    autoLayout: true,
                    ignoreTitleLayout: true,
                    headerOptions: { width: 1, display: false },
                    spacing: style.spacing,
                },
                [
                    CreateUIButton(name + '-development-screenshot', stage.uiScene,
                        {
                            ...btnStyle,
                            imageUrl: ScreenshotImage(),
                            key: 'screenshot',
                        },
                        () => {
                            CaptureScreen.capture(engine, stage.mainCamera, !!style.isProduction, style.appName!);
                            root.onScreenshotButtonClick(stage);
                        }
                    ),
                    CreateUIButton(name + '-development-qr-code', stage.uiScene,
                        {
                            ...btnStyle,
                            imageUrl: QrCodeImage(),
                            key: 'qr-code',
                        },
                        () => {
                            if (!qrImg.display) {
                                const canvas = document.createElement('canvas');
                                const qrs = style.isOriginalQr ? window.location.href : window.parent.location.href;
                                toCanvas(canvas, qrs, { width: style.qrCodeSize });
                                qrImg.url = canvas.toDataURL('image/png');
                                qrImg.display = true;
                            } else {
                                qrImg.display = false;
                            }
                            root.onQrCodeButtonClick(stage);
                        }
                    ),
                    qrImg = CreateUIImage(name + '-development-qr-code-image', stage.uiScene,
                        {
                            anchor: ANCHOR.CENTER_TOP,
                            width: style.lineHeight! * 6,
                            height: style.lineHeight! * 6,
                            display: false,
                            renderingGroupId:style.frontRenderingId,
                        }
                    ),
                ]
            ),

        ]
    );

    return [developmentNode];
};


export { CreateDevelopmentUiNodes };